<template>
  <div id="scrollNum">
    <div class="box-item">
      <li :class="{
          'number-item': !isNaN(item),
          'mark-item': isNaN(item),
          bgColor:!isNaN(item)? bgColor:'',
        }" :style="{
          width: Width,
          height: '.46rem',
          lineHeight: Height,
          fontSize: FontSize,
          marginRight: Mright,
          border: border,
        }" v-for="(item, index) in orderNum" :key="index">
        <span :style="{
          lineHeight: Height,
          height: Height,
        }" v-if="!isNaN(item)">
          <i :style="{
              fontFamily: family,
              color: Color,
              transform: `translate(-50%, -${Number(item) * 10}%)`,
            }" ref="numberItem">0123456789</i>
        </span>
        <span :style="{
          lineHeight: Height,
        }" class="comma" v-else>{{ item }}</span>
      </li>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //值
    count: {
      type: String,
      default: "000000"
    },
    //宽
    Width: {
      type: String,
      default: "0.25rem"
    },
    //高
    Height: {
      type: String,
      default: "0.4rem"
    },
    //高
    FontSize: {
      type: String,
      default: "0.36rem"
    },
    //字体
    family: {
      type: String,
      default: "electronicFont"
    },
    //颜色
    Color: {
      type: String,
      default: "#f6fffc"
    },
    //是否需要边框
    border: {
      type: String,
      default: "none"
    },
    //是否背景
    bgColor: {
      type: Boolean,
      default: true
    },
    //右边距
    Mright: {
      type: String,
      default: "0.04rem"
    },
    //是否需要逗号
    comma: {
      type: Boolean,
      default: false
    },
    //是否需要跳动
    change: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderNum: [
        "0",
        "0",
        "0",
        "",
        "0",
        "0",
        "0",
        "",
        "0",
        "0",
        "0",
        "",
        "0",
        "0",
        "0"
      ],
      timer: null,
      range: 0
    };
  },
  watch: {
    count(newVal, oldVal) {
      if (newVal != oldVal) {
        this.toOrderNum(this.count || "0");
      }
    }
  },
  mounted() {
    // if (this.change) {
    //   let num = Number(this.count);
    //   this.range = num;
    //   this.timer = setInterval(() => {
    //     if (num - this.range < 20) {
    //       num += 2;
    //     } else {
    //       num = this.range;
    //     }
    //     this.toOrderNum(String(num) || '0');
    //   }, 6000);
    // }
    this.$nextTick(() => {
      this.toOrderNum(this.count || "0");
    });
  },
  destroyed() {
    this.timer = null;
  },
  methods: {
    // 设置文字滚动
    // setNumberTransform() {
    //   const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
    //   const numberArr = this.orderNum.filter((item) => !isNaN(item));
    //   console.log(numberItems, numberArr, 77);
    //   // 结合CSS 对数字字符进行滚动
    //   for (let index = 0; index < numberItems.length; index++) {
    //     const elem = numberItems[index];
    //     elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
    //   }
    // },
    // 处理总数字
    toOrderNum(num) {
      num = num.toString();
      // 把数变成字符串
      if (num.length < this.count.length) {
        num = "0" + num; // 未满八位数，添加"0"补位
        this.toOrderNum(num); // 递归添加"0"补位
      } else if (num.length === this.count.length) {
        // 数中加入逗号
        if (this.comma) {
          num = num.slice(0, 2) + "," + num.slice(2, 5) + "," + num.slice(5, 8);
        }
        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 数字超过八位显示异常
        // this.$message.warning("数字过大，显示异常");
      }
    }
  }
};
</script>
<style scoped lang="scss">
#scrollNum {
  /*滚动数字设置*/
  .box-item {
    position: relative;
    text-align: center;
    list-style: none;
    // color: #2d7cff;
    writing-mode: vertical-lr;
    text-orientation: upright;
    /*文字禁止编辑*/
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
  }
  /*滚动数字设置*/
  .number-item,
  .mark-item {
    list-style: none;
    // margin-right: 0.12rem;
    // border-radius: 0.05rem;
    // border: 1px solid rgba(221, 221, 221, 1);
    &.bgColor {
      background: url("../assets/img/seven/img04.png") center no-repeat;
      // border: solid 1px #008dff;
      background-size: 100% 100%;
    }
    &.mark-item {
      // padding-top: 0.1rem;
      box-sizing: border-box;
      font-size: 0.26rem !important;
    }
    & > span {
      position: relative;
      display: block;
      width: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > i {
        font-style: normal;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
        transition: transform 6s ease-in-out;
      }
    }
  }
  .number-item:last-child {
    margin-right: 0;
  }
}
</style>
